<template>
    <view>
        <view class="record-detail" v-for="(item, index) in userList" :key="index">
            <view>
                <view class="edit" @click="addRecord({ obj: item.recordVOList[0].recordDataValue })"
                    v-if="item.userId == userinfo.user_id && ((isCorrection && planStatus == 3) || (!isCorrection && planStatus == 2)) && !disabled">
                    <image src="@/static/images/edit.png" mode=""></image>
                    编辑

                </view>
                <view style="padding: 10rpx 0">
                    {{ item.name }}
                    <text style="color: #a5a5a5" v-if="type == 1 && item.recordVOList[0].recordDataValue">({{
                        item.recordVOList[0].recordDataValue.name || '正常' }})</text>
                    <text v-if="type == 2 && item.recordVOList[0].recordDataValue.type == 'in'">(范围内)</text>
                    <text v-if="type == 2 && item.recordVOList[0].recordDataValue.type == 'out'">(范围外)</text>
                </view>
                <view class="content-item" v-if="item.recordVOList[0].recordDataValue &&
                    item.recordVOList[0].recordDataValue.files.need
                ">
                    <view class="name" v-if="item.recordVOList[0].recordDataValue.files.val">
                        <text v-if="item.recordVOList[0].recordDataValue.files.must">*</text>
                        图片/视频
                    </view>
                    <view class="files">
                        <view :class="['files-item']" v-for="(it, idx) in item.recordVOList[0].recordDataValue.files
                            .val" :key="idx">
                            <image @click="
                                preViewFile(
                                    item.recordVOList[0].recordDataValue.files.val,
                                    idx
                                )
                                " :src="it.type == 'image' ? it.url : it.img || '/static/images/video.png'"
                                :lazy-load="true" mode="aspectFill"></image>
                            <!-- ai合规情况结论 S -->
                            <view v-if="it.modelId && it.aiResult !== undefined&& it.aiResult !== ''"
                                :class="['ai-result', ['gre', 'org', 'red'][it.aiResult]]">
                                <image class="ai-result-ico" src="@/static/images/ai.svg"></image>
                                <text>
                                    {{ ['合规', '疑似合规', '不合规'][it.aiResult] }}
                                </text>
                            </view>
                            <!-- ai合规情况结论 E -->

                        </view>

                    </view>
                </view>

                <view class="content-item" v-if="item.recordVOList[0].recordDataValue &&
                    item.recordVOList[0].recordDataValue.remarks.need
                ">
                    <view class="name">
                        <text v-if="item.recordVOList[0].recordDataValue.remarks.must">*</text>
                        描述
                    </view>
                    <view class="input">
                        <view class="text">
                            <text :style="item.recordVOList[0].recordDataValue.remarks.val
                                ? 'color:#333'
                                : ''
                                ">
                                {{
                                    item.recordVOList[0].recordDataValue.remarks.val ||
                                    item.recordVOList[0].recordDataValue.remarks.placeholder ||
                                    "请描述保养情况"
                                }}
                            </text>
                        </view>
                    </view>
                </view>

                <view class="content-item" v-if="item.recordVOList[0].recordDataValue &&
                    item.recordVOList[0].recordDataValue.records.need
                ">
                    <view class="name" v-if="item.recordVOList[0].recordDataValue.records.val">
                        <text v-if="item.recordVOList[0].recordDataValue.records.must">*</text>
                        数据
                    </view>
                    <view class="input">
                        <view class="text">
                            <text :style="item.recordVOList[0].recordDataValue.records.val
                                ? 'color:#333'
                                : ''
                                ">
                                {{
                                    item.recordVOList[0].recordDataValue.records.val ||
                                    item.recordVOList[0].recordDataValue.records.placeholder ||
                                    "请添加数据"
                                }}
                            </text>
                            <text style="margin-left: 10rpx; color: #333">{{
                                item.recordVOList[0].recordDataValue.records.unit
                            }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <recordHis :isCorrection="isCorrection" :userName="item.userName" :userId="item.userId" :list="item.recordVOList"></recordHis>
        </view>
    </view>
</template>

<script>
import recordHis from './recordHis.vue';
export default {
	components: { recordHis },
	props: {
		type: [Number, String],// 工作项类型  1单选 2填空 3图片 4视频
		edit: Boolean,
		userRecordVOS: {
			type: [Array, Object],
			default: () => {
				return [];
			}
		},
		userinfo: {
			type: Object,
			default: () => {
				return {};
			}
		},
		planStatus: [String, Number],
		isPlanStatus: Boolean,
		isCorrection: {  // 是否未整改 整改工单时 planStatus==3为进行中
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {
			userList: []
		};
	},
	watch: {
		userRecordVOS() {
			this.setList(this.userRecordVOS);
		}
	},
	created() {
		this.setList(this.userRecordVOS);
	},
	methods: {
		addRecord(res) {
			this.$emit('addRecord', res);
		},

		// 预览
		preViewFile(list, index) {
			this.$previewMedia({
				sources: list,
				current: index,
			});
		},
		init(list) {
			this.setList(list);
		},
		setList(list) {
			let arr = JSON.parse(JSON.stringify(list || '[]'));
			let userList = [];
			if (this.type == 1 || this.type == 3) {// 单选 图片视频
				for (let i = 0; i < arr.length; i++) {
					let normal = [];
					let after = [];
					let before = [];
					for (let j = 0; j < (arr[i].recordVOList || []).length; j++) {
						if (arr[i].recordVOList[j].status == 2) {
							arr[i].recordVOList[j].recordDataValue.files = arr[i].recordVOList[j].recordDataValue.filesBefore;
							arr[i].recordVOList[j].recordDataValue.records = arr[i].recordVOList[j].recordDataValue.recordsBefore;
							arr[i].recordVOList[j].recordDataValue.remarks = arr[i].recordVOList[j].recordDataValue.remarksBefore;
							before.push(arr[i].recordVOList[j]);
						} else if (arr[i].recordVOList[j].status == 3) {
							arr[i].recordVOList[j].recordDataValue.files = arr[i].recordVOList[j].recordDataValue.filesAfter;
							arr[i].recordVOList[j].recordDataValue.records = arr[i].recordVOList[j].recordDataValue.recordsAfter;
							arr[i].recordVOList[j].recordDataValue.remarks = arr[i].recordVOList[j].recordDataValue.remarksAfter;
							after.push(arr[i].recordVOList[j]);
						} else {
							normal.push(arr[i].recordVOList[j]);
						}
					}
					if (normal.length) {
						userList.push({
							userId: arr[i].userId,
							userName: arr[i].userName,
							recordVOList: normal,
							name: normal[0].recordDataValue.recordName || '保养记录'
						});
					}
					if (before.length) {
						userList.push({
							userId: arr[i].userId,
							userName: arr[i].userName,
							recordVOList: before,
							name: before[0].recordDataValue.beforeName || '保养前记录'
						});
					}
					if (after.length) {
						userList.push({
							userId: arr[i].userId,
							userName: arr[i].userName,
							recordVOList: after,
							name: after[0].recordDataValue.afterName || '保养后记录'
						});
					}
				}
			}
			if (this.type == 2) {
				for (const key in this.userRecordVOS) {
					let normal = [];
					let after = [];
					let before = [];
					for (let i = 0; i < this.userRecordVOS[key].list.length; i++) {
						if (this.userRecordVOS[key].list[i].status == 2) {
							this.userRecordVOS[key].list[i].recordDataValue.files = this.userRecordVOS[key].list[i].recordDataValue.filesBefore;
							this.userRecordVOS[key].list[i].recordDataValue.records = this.userRecordVOS[key].list[i].recordDataValue.recordsBefore;
							this.userRecordVOS[key].list[i].recordDataValue.remarks = this.userRecordVOS[key].list[i].recordDataValue.remarksBefore;
							before.push(this.userRecordVOS[key].list[i]);
						} else if (this.userRecordVOS[key].list[i].status == 3) {
							this.userRecordVOS[key].list[i].recordDataValue.files = this.userRecordVOS[key].list[i].recordDataValue.filesAfter;
							this.userRecordVOS[key].list[i].recordDataValue.records = this.userRecordVOS[key].list[i].recordDataValue.recordsAfter;
							this.userRecordVOS[key].list[i].recordDataValue.remarks = this.userRecordVOS[key].list[i].recordDataValue.remarksAfter;
							after.push(this.userRecordVOS[key].list[i]);
						} else {
							normal.push(this.userRecordVOS[key].list[i]);
						}
					}

					if (normal.length) {
						userList.push({
							userId: key,
							userName: this.userRecordVOS[key].name,
							recordVOList: normal,
							name: normal[0].recordDataValue.recordName || '记录详情'
						});
					}
					if (before.length) {
						userList.push({
							userId: key,
							userName: this.userRecordVOS[key].name,
							recordVOList: before,
							name: before[0].recordDataValue.beforeName || '保养前记录'
						});
					}
					if (after.length) {
						userList.push({
							userId: key,
							userName: this.userRecordVOS[key].name,
							recordVOList: after,
							name: after[0].recordDataValue.afterName || '保养后记录'
						});
					}
				}
			}
			this.userList = userList;
		}

	}
};

</script>
<style lang="scss">
.record-detail {
    position: relative;
    margin-bottom: 20rpx;
}

.content-item {
    position: relative;

    .name {
        font-size: 26rpx;
        color: #666;
        padding: 8rpx 0;

        text {
            color: red;
        }
    }

    .files {
        width: calc(100% + 50rpx);
        display: flex;
        flex-wrap: wrap;
        margin-left: -10rpx;

        &-item {
            width: 112rpx;
            height: 112rpx;
            background: #f7f7f8;
            margin: 10rpx;
            position: relative;

            image {
                width: 100%;
                height: 100%;
            }

            .remove {
                width: 32rpx;
                height: 32rpx;
                background: #cccccc;
                border-radius: 50%;
                line-height: 31rpx;
                text-align: center;
                color: #fff;
                // font-size: 41rpx;
                position: absolute;
                top: -12rpx;
                right: -12rpx;
                z-index: 7;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .ai-result {
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 112rpx;
                height: 32rpx;
                color: #fff;
                font-size: 22rpx;
                padding: 0;
                vertical-align: unset;
                font-weight: normal;

                &-ico {
                    width: 21rpx;
                    height: 21rpx;
                    margin-right: 4rpx;
                }
            }

            .gre {
                background-color: #68CA00;
            }

            .org {
                background-color: #FF7505;
            }

            .red {
                background-color: #E02020;
            }
        }

        .add {
            text-align: center;
            font-size: 24rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #0091ff;

            image {
                width: 38rpx;
                height: 38rpx;
            }
        }
    }

    .input {
        color: #333;

        .text {
            display: flex;
            align-items: center;

            input {
                width: 260rpx;
                padding: 10rpx 20rpx;
                border: 2rpx solid #e9e9e9;
                margin-right: 20rpx;
            }
        }

        text {
            color: #ccc;
            word-wrap: normal;
        }

        .input-view {
            width: 100%;
            display: flex;
            align-items: center;

            input {
                flex: 1;
                padding: 10rpx 20rpx;
                border: 2rpx solid #e9e9e9;
                margin-right: 10rpx;
            }

            .input-unit {
                width: 57%;
            }

            text {
                color: #333;
            }
        }

        textarea {
            width: calc(100% - 42rpx);
            border: 1rpx solid #e9e9e9;
            padding: 20rpx;
            height: 180rpx;
            padding-bottom: 50rpx;
        }

        .length {
            bottom: 10rpx;
            z-index: 9;
            position: absolute;
            right: 27rpx;
            font-size: 24rpx;
            color: #ccc;
        }
    }
}

.line {
    width: 100%;
    height: 2rpx;
    background-color: #eeeeee;
    margin-top: 20rpx;
}

.edit {
    position: absolute;
    z-index: 10;
    top: 10rpx;
    right: 10rpx;

    image {
        width: 35rpx;
        height: 35rpx;
    }

    font-size: 26rpx;
    color: #0091ff;
    display: flex;
    align-items: center;
}
</style>